<style>
    .pagination {
      justify-content: center;
    }
    .img{
      display: flex;
      justify-content: space-around;
    }
    .img img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
    }
  </style>
  <!--页面主要内容-->
  <main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-toolbar d-flex flex-column flex-md-row">
              <div class="toolbar-btn-action">
                <a class="btn btn-success" href="{:url('admin/express/add')}"><i class="mdi mdi-plus"></i> 新增</a>
                <a class="btn btn-danger"><i class="mdi mdi-window-close"></i> 删除</a>
              </div>
              <form class="search-bar ml-md-auto" method="get" role="form">
                <input type="hidden" name="search_field" id="search-field" value="name" />
                <div class="input-group ml-md-auto">
                  <div class="input-group-prepend">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false" id="search-btn">公司名称</button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="javascript:void(0);" data-field="name">公司名称</a>
                    </div>
                  </div>
                  <input type="text" class="form-control" name="keyword" placeholder="请输入关键字" value="">
                </div>
              </form>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" class="custom-control-input" id="check-all">
                          <label class="custom-control-label" for="check-all"></label>
                        </div>
                      </th>
                      <th>编号</th>
                      <th>公司名称</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {foreach $ExpressList as $key => $item}
                    <tr>
                      <td>
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" class="custom-control-input ids" name="ids[]" value="{$item['id']}"
                            id="ids-{$item['id']}">
                          <label class="custom-control-label" for="ids-{$item['id']}"></label>
                        </div>
                      </td>
                      <td>{$key + ($page - 1) * $num + 1}</td>
                      <td>{$item['name']}</td>
                      <td>
                        <div class="btn-group">
                          <a class="btn btn-xs btn-default"
                            href="{:url('/admin/express/edit',['expid' => $item['id']])}" title="" data-toggle="tooltip"
                            data-original-title="编辑">
                            <i class="mdi mdi-pencil"></i>
                          </a>
                          <a class="btn btn-xs btn-default del" data-toggle="tooltip" data-expid="{$item['id']}"
                            data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                        </div>
                      </td>
                    </tr>
                    {/foreach}
                  </tbody>
                </table>
              </div>
              <!-- 分页 -->
              {$ExpressList|raw}
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!--End 页面主要内容-->
  
  <script>
    $('.search-bar .dropdown-menu a').click(function () {
      var field = $(this).data('field') || '';
      $('#search-field').val(field);
      $('#search-btn').html($(this).text());
    });
    function GetID() {
      var IdArr = []
      $('input[name="ids[]"]:checked').each(function (index, item) {
        IdArr.push(item.value)
      })
      return IdArr
    }
    // 单条删除
    $('.del').click(function () {
      $.confirm({
        title: '删除',
        content: '确认删除物流公司？',
        buttons: {
          confirm: {
            text: '确认',
            btnClass: 'btn-info',
            action: () => {
              var expid = $(this).data('expid')
              $.ajax({
                type: "post",
                url: `{:url('admin/express/del')}`,
                data: {
                  action: 'del',
                  expid
                },
                dataType: "json",
                success: function (res) {
                  if (res.code === 1) {
                    $.notify({
                      message: res.msg
                    }, {
                      delay: 1000,
                      type: 'success',
                      onClose: function () {
                        location.reload()
                      }
                    })
                  } else {
                    $.notify({
                      message: res.msg,
                    }, {
                      delay: 1000,
                      type: 'warning'
                    })
                  }
                }
              })
            }
          },
          cancel: {
            text: '取消',
            btnClass: 'btn-danger'
          }
        }
      })
    })
    // 批量删除
    $('.btn-danger').click(function () {
      var ids = GetID()
      if (ids.length == 0) {
        $.notify({
          message: '请选择需要删除的服务',
        }, {
          type: 'warning'
        })
        return false
      }
      $.confirm({
        title: '批量删除服务',
        content: '确认批量删除服务？',
        buttons: {
          confirm: {
            text: '确认',
            btnClass: 'btn-info',
            action: () => {
              $.ajax({
                type: "post",
                url: `{:url('admin/express/del')}`,
                data: {
                  action: 'dels',
                  ids
                },
                dataType: "json",
                success: function (res) {
                  if (res.code === 1) {
                    $.notify({
                      message: res.msg
                    }, {
                      delay: 1000,
                      type:'success',
                      onClose: function () {
                        location.reload()
                      }
                    })
                  } else {
                    $.notify({
                      message: res.msg,
                    }, {
                      delay: 1000,
                      type: 'warning'
                    })
                  }
                }
              })
            }
          },
          cancel: {
            text: '取消',
            btnClass: 'btn-danger'
          }
        }
      })
    })
  </script>